<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div class="container el-flowcenter-container">
          <div class="handle-box">
            <el-row>
              <el-col>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="this.showflowcentervisable = true"
                  >{{ this.$t("i18n.flow_center_add") }}</el-button
                >
              </el-col>
            </el-row>
          </div>
          <el-card shadow="hover" class="el-card-title mgt15">
            <el-tabs
              v-model="activeName"
              class="demo-tabs demo-tabs-height"
              @tab-click="InitTable(null)"
            >
              <el-tab-pane name="todo">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-lx-file"></i>
                      {{ $t("i18n.flow_workbench_todo") }}
                    </span>
                  </div>
                </template>
                <div>
                  <el-scrollbar class="flow-todolist-scrollbar">
                    <div >
                      <table-componets-vue
                        ref="table1"
                        :isShowButton="false"
                        :Sizes="sizes"
                        :layout="layout"
                        @PageChange="PageChange"
                        :currentPage="query.page"
                        :pageSize="query.pageSize"
                        @tableEvent="tableEvent"
                        :loading="tableLoading"
                        :isQuery="1 == 1"
                        :tables="tables"
                        :isOpertions="1 == 1"
                        @hyperLinekEvent="hyperLinekEvent"
                      ></table-componets-vue>
                    </div>
                  </el-scrollbar>
                </div>
              </el-tab-pane>
              <el-tab-pane name="circulated">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-lx-notice"></i>
                      {{ $t("i18n.flow_workbench_read") }}
                    </span>
                  </div>
                </template>
                <div >
                  <table-componets-vue
                    ref="table1"
                    :isShowButton="false"
                    :Sizes="sizes"
                    :layout="layout"
                    @PageChange="PageChange"
                    :currentPage="query.page"
                    :pageSize="query.pageSize"
                    @tableEvent="tableEvent"
                    :loading="tableLoading"
                    :isQuery="1 == 1"
                    :tables="tables"
                    :isOpertions="1 == 1"
                    @hyperLinekEvent="hyperLinekEvent"
                  ></table-componets-vue>
                </div>
              </el-tab-pane>
              <el-tab-pane name="apply">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-lx-addressbook"></i>
                      {{ $t("i18n.flow_workbench_apply") }}
                    </span>
                  </div>
                </template>
                <div >
                  <table-componets-vue
                    ref="table1"
                    :isShowButton="false"
                    :Sizes="sizes"
                    :layout="layout"
                    @PageChange="PageChange"
                    :currentPage="query.page"
                    :pageSize="query.pageSize"
                    @tableEvent="tableEvent"
                    :loading="tableLoading"
                    :isQuery="1 == 1"
                    :tables="tables"
                    :isOpertions="1 == 1"
                    @hyperLinekEvent="hyperLinekEvent"
                  ></table-componets-vue>
                </div>
              </el-tab-pane>
              <el-tab-pane name="done">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-finished"></i>
                      {{ $t("i18n.flow_workbench_done") }}
                    </span>
                  </div>
                </template>
                <div >
                  <table-componets-vue
                    ref="table1"
                    :isShowButton="false"
                    :Sizes="sizes"
                    :layout="layout"
                    @PageChange="PageChange"
                    :currentPage="query.page"
                    :pageSize="query.pageSize"
                    @tableEvent="tableEvent"
                    :loading="tableLoading"
                    :isQuery="1 == 1"
                    :tables="tables"
                    :isOpertions="1 == 1"
                    @hyperLinekEvent="hyperLinekEvent"
                  ></table-componets-vue>
                </div>
              </el-tab-pane>
              <el-tab-pane name="mayapply">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-lx-people"></i>
                      {{ $t("i18n.flow_workbench_myapply") }}
                    </span>
                  </div>
                </template>
                <div >
                  <table-componets-vue
                    ref="table1"
                    :isShowButton="false"
                    :Sizes="sizes"
                    :layout="layout"
                    @PageChange="PageChange"
                    :currentPage="query.page"
                    :pageSize="query.pageSize"
                    @tableEvent="tableEvent"
                    :loading="tableLoading"
                    :isQuery="1 == 1"
                    :tables="tables"
                    :isOpertions="1 == 1"
                    @hyperLinekEvent="hyperLinekEvent"
                  ></table-componets-vue>
                </div>
              </el-tab-pane>
              <el-tab-pane name="cc">
                <template #label>
                  <div>
                    <span class="font_16px">
                      <i class="el-icon-chat-dot-round"></i>
                      {{ $t("i18n.flow_workbench_cc") }}
                    </span>
                  </div>
                </template>
                <div >
                  <table-componets-vue
                    ref="table1"
                    :isShowButton="false"
                    :Sizes="sizes"
                    :layout="layout"
                    @PageChange="PageChange"
                    :currentPage="query.page"
                    :pageSize="query.pageSize"
                    @tableEvent="tableEvent"
                    :loading="tableLoading"
                    :isQuery="1 == 1"
                    :tables="tables"
                    :isOpertions="1 == 1"
                    @hyperLinekEvent="hyperLinekEvent"
                  ></table-componets-vue>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showflowcentervisable"
      direction="rtl"
      size="55.5%"
    >
      <flow-center-componet-vue
        v-if="showflowcentervisable"
        @SortEvent="
          this.showflowcentersortvisable = true;
          this.showflowcentervisable = false;
        "
      ></flow-center-componet-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showflowcentersortvisable"
      direction="rtl"
      size="55.5%"
    >
      <flow-center-sort-componet-vue
        v-if="showflowcentersortvisable"
        @SortEvent="this.showflowcentersortvisable = false"
      ></flow-center-sort-componet-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showflowcurrentinfovisable"
      direction="rtl"
      size="35%"
    >
      <flow-current-task-infos-vue
        ref="currenttask"
        v-if="showflowcurrentinfovisable"
        @ClosedEvent="this.showflowcurrentinfovisable = false"
      >
      </flow-current-task-infos-vue>
    </el-drawer>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showpicturedrawer"
      direction="rtl"
      size="90%"
      :before-close="handleClose"
    >
      <flow-picture-componet-vue
        v-if="showpicturedrawer"
        ref="flowpicture"
        @ClosedEvent="closedEvent"
      >
      </flow-picture-componet-vue>
    </el-drawer>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
import FlowCenterComponetVue from "../../components/Global/FlowCenterComponet.vue";
import FlowCenterSortComponetVue from "../../components/Global/FlowCenterSortComponet.vue";
import TableComponetsVue from "../../components/TableComponets.vue";
import FlowCurrentTaskInfosVue from "../../components/Global/FlowCurrentTaskInfos.vue";
import FlowPictureComponetVue from "../../components/Global/FlowPictureComponet.vue";

let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    FlowCenterComponetVue,
    FlowCenterSortComponetVue,
    TableComponetsVue,
    FlowCurrentTaskInfosVue,
    FlowPictureComponetVue,
  },
  data() {
    return {
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      btns: [],
      showflowcentervisable: false,
      page_Title: "",
      pageType: "add",
      tableLoading: false,
      apipath: "flowcenter",
      way: confVue.$flowApi,
      showflowcentersortvisable: false,
      activeName: "todo",
      showflowcurrentinfovisable: false,
      showpicturedrawer: false,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.treeloadig = true;
    this.activeName = this.$route.query.callType ?? this.activeName;
    this.InitTable(null);
  },
  methods: {
    closedEvent() {
      this.showpicturedrawer = false;
    },
    getHeight() {
      this.outHeight.height = windowHeight - 260 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.checkPermission = true;
      this.query.paramters = [];
      this.query.paramters.push({ label: "tasktype", value: this.activeName });
      reqVue.$Post(this.query, this.apipath + "/v1.0/pages", this.way).then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    tableEvent(btn) {
      this.deleteEvent(btn.data);
      this.recycleEvent(btn.data);
      this.detaileEvent(btn.data);
    },
    ///删除
    deleteEvent(btn) {
      if (btn.value == "delete") {
        this.$confirm(this.$t("i18n.confirm_del"), this.$t("i18n.confirm"), {
          type: "warning",
        }).then(() => {
          reqVue
            .$Post(
              null,
              "flowengine/v1.0/delete/" + btn.primaryKeyValue,
              this.way
            )
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.PageChange(queryModel);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    ///超链接地址跳转
    hyperLinekEvent(para) {
      ///标题的链接
      if (para.row.key == "title") {
        this.$router.push({
          path: "/process",
          query: {
            flowId: para.data.flowId,
            flowVersionId: para.data.flowVersionId,
            formId: para.data.formId,
            formVersionId: para.data.formVersionId,
            taskId: para.data.taskId,
            callType: this.activeName,
            approvalType: para.data.processType,
          },
        });
      }
      ///当前部门和当前处理人
      if (para.row.key == "dic_StepId" || para.row.key == "dic_Reviewer") {
        this.showflowcurrentinfovisable = true;
        this.$nextTick(function() {
          this.$refs.currenttask.InitFlow(para.data.currentTasks);
        });
      }
    },
    //回收任务
    recycleEvent(btn) {
      if (btn.value == "recycle") {
        this.$confirm(
          this.$t("i18n.confirm_recycling"),
          this.$t("i18n.confirm"),
          {
            type: "warning",
          }
        ).then(() => {
          reqVue
            .$Post(
              null,
              "flowengine/v1.0/recycling/" + btn.primaryKeyValue,
              this.way
            )
            .then(
              function(data) {
                if (data.status) {
                  let queryModel = {};
                  queryModel.currentPage = this.query.page;
                  queryModel.pageSize = this.query.pageSize;
                  this.PageChange(queryModel);
                } else {
                  this.$message.error(data.message);
                }
              }.bind(this)
            );
        });
      }
    },
    //展示过程
    detaileEvent(btn) {
      if (btn.value == "detaile") {
        this.showpicturedrawer = true;
        this.$nextTick(function() {
          this.$refs.flowpicture.flowId = btn.parameters.flowId;
          this.$refs.flowpicture.flowVersionId = btn.parameters.flowVersionId;
          this.$refs.flowpicture.taskId = btn.parameters.taskId;
          this.$refs.flowpicture.isProcesView = true;
          this.$refs.flowpicture.InitFlow();
        });
      }
    },
  },
};
</script>
